<template>
    <div class="fund-password-container">
      <div class="header">
        <div class="back" @click="handleBack">
            <van-icon name="arrow-left" class="home-icon" />
          </div>
        <div class="title">Login Password</div>
      </div>
  
      <div class="input-section">
        <van-field
          v-model="oldPassword"
          class="input-item"
          :type="showOldPassword?'text':'password'"
          placeholder="Old login password"
          :right-icon="showOldPassword ? 'eye-o' : 'closed-eye'"
          @click-right-icon="togglePasswordVisibility('old')"
        />
        
        <van-field
          v-model="newPassword"
          class="input-item"
          :type="showNewPassword ? 'text' : 'password'"
          placeholder="New login password"
          :right-icon="showNewPassword ? 'eye-o' : 'closed-eye'"
          @click-right-icon="togglePasswordVisibility('new')"
        />
        
        <van-field
          v-model="confirmPassword"
          class="input-item"
          :type="showConfirmPassword ? 'text' : 'password'"
          placeholder="Confirm new password"
          :right-icon="showConfirmPassword ? 'eye-o' : 'closed-eye'"
          @click-right-icon="togglePasswordVisibility('confirm')"
        />
      </div>
  
      <van-button 
        class="submit-btn" 
        type="primary" 
        block 
        :loading="loading"
        @click="handleSubmit"
      >
        Submit Settings
      </van-button>
    </div>
  </template>
  
  <script setup name="Password">
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { Field, Button, Icon, Toast } from 'vant';
  import { UserApi } from '@/api/user.api';
  
  const router = useRouter();
  
  // Form data
  const oldPassword = ref('');
  const newPassword = ref('');
  const confirmPassword = ref('');
  
  // Password visibility
  const showOldPassword = ref(false);
  const showNewPassword = ref(false);
  const showConfirmPassword = ref(false);
  
  // Loading state
  const loading = ref(false);
  
  const handleBack = () => {
    router.go(-1);
  };
  
  const togglePasswordVisibility = (field) => {
    if (field === 'old') {
      showOldPassword.value = !showOldPassword.value;
    } else if (field === 'new') {
      showNewPassword.value = !showNewPassword.value;
    } else {
      showConfirmPassword.value = !showConfirmPassword.value;
    }
  };
  
  const handleSubmit = () => {
    if (!oldPassword.value || !newPassword.value || !confirmPassword.value) {
      Toast('Please fill in all fields');
      return;
    }
  
    if (newPassword.value !== confirmPassword.value) {
      Toast('New passwords do not match');
      return;
    }
  
    if (newPassword.value.length < 6) {
      Toast('Password must be at least 6 characters');
      return;
    }
  
    loading.value = true;
    
    // Simulate API call
    UserApi.setPassword({ oldPassword: oldPassword.value, newPassword: newPassword.value })
      .then((res) => {
        if (res.code === 200) {
          Toast.success('Password updated successfully');
          router.go(-1); // Go back to the previous page
        } else {
          Toast.fail(res.message);
        }
      })
      .catch((error) => {
        Toast.fail('An error occurred');
        
      })
  };
  </script>
  
  <style scoped>
  .fund-password-container {
    height: 100vh;
    background: #f5f5f5;
  }
  
  .header {
    position: relative;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-bottom: 1px solid #eee;
  }
  
  .back {
    position: absolute;
    left: 0;
    top: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  .back-icon {
    font-size: 18px;
    color: #333;
  }
  
  .title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  
  .input-section {
    padding: 20px;
  }
  
  .input-item {
    position: relative;
    background: white;
    border-radius: 12px;
    margin-bottom: 15px;
    padding: 12px;
    display: flex;
    align-items: center;
  }
  
  :deep(.van-field__control) {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #333;
    background: #f5f5f5;
    padding: 10px;
    border-radius: 8px;
    margin-right: 10px;
    height: 36px;
  }
  
  .submit-btn {
    width: calc(100% - 40px);
    margin: 30px 20px;
    padding: 15px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(90deg, #4460F6, #4C6FFF);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
  }
  </style>